<template>
  <el-dialog
    v-el-drag-dialog="{updataFull, updataDialogWidth}"
    :fullscreen="isfullscreen"
    :width="setDialogWidth('600px')"
    :visible="visible"
    :title="title"
    @open="open"
    @close="close"
  >
    <el-form
      ref="form"
      class="pr-20"
      label-width="auto"
      :model="form"
      :rules="rules"
    >
      <el-form-item :label="$t('PARTNUMBER')" prop="roleId">
        <el-input
          v-model.trim="form.roleId"
          maxlength="32"
          :readonly="type != 'add'"
          :placeholder="$t('ENTERTHEROLENUMBER')"
        />
      </el-form-item>
      <el-form-item :label="$t('CHARACTERNAME')" prop="roleName">
        <el-input
          v-model.trim="form.roleName"
          maxlength="32"
          :readonly="type == 'view'"
          :placeholder="$t('ENTERAROLENAME')"
        />
      </el-form-item>
      <el-form-item :label="$t('DESCRIPTION')" prop="description">
        <el-input
          v-model="form.description"
          type="textarea"
          :readonly="type == 'view'"
          :placeholder="$t('ENTER_DESCRIPTION')"
          :row="4"
          maxlength="200"
          show-word-limit
        />
      </el-form-item>
      <el-form-item :label="$t('WHETHER_ENABLE')" prop="enable">
        <el-radio-group
          v-model="form.enable"
          :disabled="type == 'view'"
          size="mini"
        >
          <el-radio-button label="true">{{ $t('ENABLE') }}</el-radio-button>
          <el-radio-button label="false">{{ $t('DISABLE') }}</el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template v-slot:footer>
      <template v-if="type == 'view'">
        <el-button @click="close">{{ $t('CLOSE') }}</el-button>
      </template>
      <template v-else>
        <el-button @click="close">{{ $t('CANCEL') }}</el-button>
        <el-button type="primary" @click="$debounce(save)">{{
          $t('SAVE')
        }}</el-button>
      </template>
    </template>
  </el-dialog>
</template>

<script>
  import RoleApi from '@/api/system/RoleApi'

  export default {
    props: {
      visible: Boolean,
      type: { type: String, default: '' },
      data: { type: Object, default: () => {} }
    },
    data() {
      return {
        form: {}
      }
    },
    computed: {
      title() {
        if (this.type === 'add') {
          return this.$t('NEWROLE') // '新增角色'
        } else if (this.type === 'view') {
          return this.$t('CHECKTHEROLE') // '查看角色'
        }
        return this.$t('MODIFYTHEROLE') // '修改角色'
      },
      rules() {
        return {
          roleId: [
            {
              required: true,
              message: this.$t('ROLE_NUMBER_NOT_EMPTY'), // '角色编号不能为空',
              trigger: ['blur', 'change']
            },
            {
              pattern: /^[a-zA-Z0-9_]+$/,
              message: this.$t('ONLY_ENGLISH_NUMBER'), // '只能为英文、数字、下划线',
              trigger: ['blur', 'change']
            },
            { min: 2, max: 32, message: this.$t('LENGTHMSG', { minMsg: 2, maxMsg: 32 }), trigger: ['blur', 'change'] }
          ],
          roleName: [
            {
              required: true,
              message: this.$t('ROLE_NAME_NOT_EMPTY'), // '角色名称不能为空',
              trigger: ['blur', 'change']
            },
            { min: 2, max: 32, message: this.$t('LENGTHMSG', { minMsg: 2, maxMsg: 32 }), trigger: ['blur', 'change'] }
          ]
        }
      }
    },
    methods: {
      defaultData() {
        return {
          enable: true,
          roleId: '',
          roleName: '',
          description: ''
        }
      },
      open() {
        this.$refs.form && this.$refs.form.clearValidate()
        this.form = Object.assign(this.defaultData(), this.data)
      },
      save() {
        this.$refs.form.validate(valid => {
          if (!valid) {
            return false
          }
          RoleApi[this.type](this.form).then(result => {
            if (result) {
              this.$message.success(this.$t('SAVE_SUCCESS'))
              this.close(true)
            }
          })
        })
      },
      close(load) {
        this.$emit('close', load)
      }
    }
  }
</script>

<style scoped></style>
